<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white" height-hint="98">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
          </q-avatar>
          管理
        </q-toolbar-title>

        <!-- <q-btn flat round dense icon="sim_card" class="q-mr-xs">
          <q-popup-proxy>
            <q-banner>
              <template v-slot:avatar>
                <q-icon name="signal_wifi_off" color="primary" />
              </template>
              个人信息 用户名：
            </q-banner>
          </q-popup-proxy>
        </q-btn> -->

        <q-btn
          unelevated
          :label="userInfo.realname"
          flat
          no-caps
          icon-right="arrow_drop_down"
          class="q-mx-xs"
        >
          <q-menu transition-show="scale" transition-hide="scale">
            <div class="column bg-layoutcolor text-white profile-menu">
              <q-item
                clickable
                @click="logout"
                class="row items-center q-px-lg"
              >
                <q-icon name="exit_to_app" />
                <q-item-label class="q-pl-md menu-label">退出登录</q-item-label>
              </q-item>
            </div>
          </q-menu>
        </q-btn>

        <!-- <q-btn flat round dense icon="gamepad" /> -->
        <!-- <q-btn flat round dense icon="bi-x-circle" /> -->
      </q-toolbar>

      <q-tabs align="left">
        <q-route-tab to="/signal" label="扫描页面" />
        <q-route-tab to="/setting" label="信息页面" />
        <q-route-tab to="/other" label="其他界面" />
        <q-route-tab to="/setting" label="管理界面" />
      </q-tabs>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      side="left"
      behavior="mobile"
      bordered
      :width="200"
      :breakpoint="400"
    >
      <!-- drawer content -->
      <q-scroll-area
        style="
          height: calc(100% - 150px);
          margin-top: 150px;
          border-right: 1px solid #ddd;
        "
      >
        <q-list padding>
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="inbox" />
            </q-item-section>

            <q-item-section> Inbox </q-item-section>
          </q-item>

          <q-item active clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="star" />
            </q-item-section>

            <q-item-section> Star </q-item-section>
          </q-item>

          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="send" />
            </q-item-section>

            <q-item-section> Send </q-item-section>
          </q-item>

          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="drafts" />
            </q-item-section>

            <q-item-section> 退出登录 </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>

      <q-img
        class="absolute-top"
        src="https://cdn.quasar.dev/img/material.png"
        style="height: 150px"
      >
        <div class="absolute-bottom bg-transparent">
          <q-avatar size="56px" class="q-mb-sm">
            <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
          </q-avatar>
          <div class="text-weight-bold">Razvan Stoenescu</div>
          <div>@rstoenescu</div>
        </div>
      </q-img>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ref, computed } from "vue";
// import { metadataTableService, metadataSequenceService } from "../service";

export default {
  setup() {
    const $store = useStore();
    const $router = useRouter();
    const leftDrawerOpen = ref(false);

    return {
      leftDrawerOpen,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value;
      },
      userInfo: computed(() => {
        return $store.state.user.userInfo;
      }),
      // userInfo: {
      //   get() {
      //     return this.$store.state.user.userInfo;
      //   },
      // },
      // isAllowBack: {
      //   get() {
      //     return this.$store.state.config.isAllowBack;
      //   },
      // },
      goBack() {
        $router.go(-1);
      },
      goHome() {
        $router.push("/");
      },
      logout() {
        $store
          .dispatch("user/logout")
          .then(async () => {
            $router.push("/login");
          })
          .catch((e) => {
            console.error(e);
          });
      },
    };
  },
};
</script>
<style>
.profile-menu {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
}
</style>
